<template>
  <div class="main">
    <div class="header">
      <span class="title">写留言</span>
      <span class="iconfont icon-guanbi" @click="$emit('closeSidebar')"></span>
    </div>
    <ul class="selectColor">
      <li v-for="(color, index) in colors" :key="index" :style="{ backgroundColor: color }"
        :class="{ active: chooseColor === index }" @click="chooseColor = index"></li>
    </ul>
    <div class="paper" :style="{ backgroundColor: messageColors[chooseColor] }">
      <textarea placeholder="留言..." maxlength="96" v-model="message"></textarea>
      <input type="text" placeholder="签名" v-model="sign">
    </div>
    <div class="selectCategories">
      <span>选择标签</span>
      <ul>
        <li v-for="(category, index) in categories" :class="{ active: chooseCategory === index }"
          @click="chooseCategory = index">{{
            category }}</li>
      </ul>
    </div>
    <div class=statement>
      <span>免责声明</span>
      <p>
        请不要利用此平台服务制作、上传、下载、复制、发布、传播或者转载如下内容：<br>
        1、反对宪法所确定的基本原则的；<br>
        2、危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家 统一的；<br>
        3、损害国家荣誉和利益的；<br>
        4、煽动民族仇恨、民族歧视，破坏民族团结的；<br>
        5、破坏国家宗教政策，宣扬邪教和封建迷信的；<br>
        6、散布谣言，扰乱社会秩序，破坏社会稳定的；<br>
        7、散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；<br>
        8、侮辱或者诽谤他人，侵害他人合法权益的；<br>
        9、含有法律、行政法规禁止的其他内容的信息。
      </p>
    </div>
  </div>
  <div class="footer">
    <el-button round class="quit" @click="$emit('closeSidebar')">放弃</el-button>
    <el-button type="success" round class="confirm" @click="submitCreateMessage"
      :disabled="!(message && sign)">确定</el-button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
import { messageColors } from './Wall.vue'
import { useMessagesStore } from '../store/messages'
import type { MessageType } from '../store/messages'
import { ElMessage } from 'element-plus'

const colors = [
  'rgba(252, 175, 162, 1)',
  'rgba(255, 227, 148, 1)',
  'rgba(146, 230, 245, 1)',
  'rgba(168, 237, 138, 1)',
  'rgba(202, 167, 247, 1)',
]

const categories = ['留言', '目标', '理想', '过去', '将来', '爱情', '友情', '秘密', '信条', '无题']

export default defineComponent({
  emits: ['closeSidebar'],
  setup(props, { emit }) {
    // 便签纸的颜色
    const chooseColor = ref(0)

    // 留言的类型
    const chooseCategory = ref(0)

    // 留言内容
    const message = ref('')

    // 签名
    const sign = ref('')

    const messagesStore = useMessagesStore()
    // 新建留言处理函数
    const submitCreateMessage = async () => {
      emit('closeSidebar')
      const newMessage: MessageType = {
        author: sign.value,
        content: message.value,
        created_at: Date.now(),
        tag: chooseCategory.value + 1,
        color: chooseColor.value
      }
      const result = await messagesStore.createMessage(newMessage)
      if (result) {
        ElMessage({
          showClose: true,
          message: '感谢您的留言🙏',
          type: 'success',
          duration: 1000
        })
      } else {
        ElMessage({
          showClose: true,
          message: '请在登录后进行操作',
          type: 'warning',
          duration: 1000
        })
      }
    }

    return { colors, chooseColor, chooseCategory, messageColors, categories, message, sign, submitCreateMessage }
  }
})
</script>

<style lang="less" scoped>
.main {
  padding: 20px;
}

.header {
  font-size: 16px;
  color: #202020;
  font-weight: 600;
  display: flex;
  justify-content: space-between;

  .icon-guanbi {
    cursor: pointer;
  }
}

.selectColor {
  margin-top: 30px;
  overflow: hidden;

  li {
    float: left;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    box-sizing: border-box;

    &:hover {
      cursor: pointer;
    }

    &.active {
      border: 1px solid rgba(59, 115, 240, 1);
    }
  }
}

.paper {
  width: 100%;
  height: 240px;
  margin-top: 12px;
  padding: 12px;
  box-sizing: border-box;

  textarea {
    width: 100%;
    height: 174px;
    padding: 8px;
    resize: none;
    font-size: 15px;
    background-color: transparent;
    line-height: 1.5;
    font-family: 'Times New Roman', Times, serif;
    border: none;
    box-sizing: border-box;
  }

  input[type="text"] {
    flex: 2;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid #ffffff;
    font-family: 'Times New Roman', Times, serif;
    background-color: transparent;
    padding: 8px;
    box-sizing: border-box;
    height: 36px;
    text-align: right;
  }

}

.selectCategories {
  margin-top: 30px;

  span {
    font-weight: 600;
  }

  ul {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;

    li {
      color: #5b5b5b;
      padding: 5px 10px;
      border-radius: 14px;
      margin-bottom: 10px;
      cursor: pointer;

      &.active {
        background-color: #ebebeb;
        font-weight: 600;
        color: #202020;
      }
    }
  }
}

.statement {
  font-size: 12px;
  color: #949494;
  margin-bottom: 10px;

  span {
    font-size: 14px;
    color: #202020;
    font-weight: 600;
  }

  p {
    margin-top: 10px;
    line-height: 1.5;
  }
}

.footer {
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  height: 88px;
  background: rgba(255, 255, 255);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  left: 0;
  bottom: 0;

  .quit {
    width: 100px;
    height: 40px;
  }

  .confirm {
    width: 200px;
    height: 40px;
  }
}
</style>